<template>
	<view class="container">
		<view class="pore" style="z-index: 999;">
			<u-navbar title="家政补贴" bgColor="transparent" @leftClick="leftBack"
				:titleStyle="{'color':'#000', 'fontWeight': 600}">
			</u-navbar>
		</view>
		<!-- 顶部导航 -->
		<view class="banner-wrapper">
			<view class="banner-text">
				<view class="nav-bar">
					<text class="nav-text">市商务局</text>
					<text class="nav-divider">|</text>
					<text class="nav-text">市家政协会</text>
					<text class="nav-divider">|</text>
					<text class="nav-text">东楚畅通</text>
				</view>
				<view class="title-section">
					<text class="main-title">2025黄石家政服务消费券</text>
					<view class="">
						<text class="sub-title">惠民超值·至高立减25%</text>
					</view>
					<view class="tag-box">
						
					</view>
				</view>
			</view>
		</view>

		<!-- 三个功能图标 -->
		<view class="feature-icons">
			<view class="icon-item">
				<view class="icon-box">
					<image class="icon" src="https://hxs.dsjhs.com:553/prod-api/profile/act3-icon.png" mode="widthFix">
					</image>
				</view>
				<text class="icon-title">立减优惠</text>
				<text class="icon-desc">下单最高立减25%</text>
			</view>
			<view class="icon-item">
				<view class="icon-box">
					<image class="icon" src="https://hxs.dsjhs.com:553/prod-api/profile/act2-icon.png" mode="widthFix">
					</image>
				</view>
				<text class="icon-title">高额补贴</text>
				<text class="icon-desc">最高补贴60元</text>
			</view>
			<view class="icon-item">
				<view class="icon-box">
					<image class="icon" src="https://hxs.dsjhs.com:553/prod-api/profile/act1-icon.png" mode="widthFix">
					</image>
				</view>
				<text class="icon-title">服务保障</text>
				<text class="icon-desc">下单安享优惠</text>
			</view>
		</view>

		<!-- 活动时间 -->
		<view class="activity-time">
			<view class="activity-header flex">
				<text class="time-title">活动时间</text>
				<text class="time-note">如补贴金额使用完毕，则活动提前结束</text>
			</view>
			<text class="time-content">第一轮发放：计划7月4日10:00投放</text>
			<text class="time-content">第二轮发放：计划7月18日10:00投放</text>

		</view>

		<!-- 活动内容 -->
		<view class="activity-content">
			<view class="content-title">
				<text class="pl20">活动内容</text>
			</view>
			<!-- <text class="content-desc">第一轮发放：计划5月1日20:00投放，</text> -->

			<!-- 优惠券列表 -->
			<view class="coupon-list">
				<view class="yhq-item pore p30 mb20" v-for="(item,index) in listData" :key="index">
					<view class="pore">
						<view class="flex" v-if="item.conpType == 1">
							<view class="mr30">
								<view :class="item.useStauts > 0?'c999':'cyellow'">
									<text class="f24">￥</text>
									<text class="f40 bold">{{item.conpTextObject.deductionAmount}}</text>
								</view>
								<view class="f24" :class="item.useStauts > 0?'c999':'cyellow'">
									满{{item.conpTextObject.fullAmount}}可用</view>
							</view>
							<u-line length="100rpx" color="#eee" direction="col"></u-line>
							<view class="ml30 flex1" :class="item.useStauts  > 0?'c999':'c343'">
								<view class="bold f28 mb10">{{item.name}}</view>
								<view class="f24">
									有效期：{{item.lifespanTextObject.startTime | formatDate }} ~ {{item.lifespanTextObject.endTime | formatDate }}
								</view>
								<!-- <view class="f24" v-if="item.lifespanType == 2">
									有效期：{{item.lifespanTextObject.lifespan}}天</view> -->
							</view>
						</view>
						<view class="flex" v-if="item.conpType == 2">
							<view class="mr30">
								<view :class="item.useStauts > 0?'c999':'cyellow'">
									<text class="f40 bold">{{item.conpTextObject.discount}}折</text>
								</view>
								<view class="f24" :class="item.useStauts > 0?'c999':'cyellow'">
									最高减{{item.conpTextObject.maxReduction}}元</view>
							</view>
							<u-line length="100rpx" color="#eee" direction="col"></u-line>
							<view class="ml30 flex1" :class="item.useStauts  > 0?'c999':'c343'">
								<view class="bold f28 mb10">{{item.name}}</view>
								<view class="f24">
									有效期：{{item.lifespanTextObject.startTime | formatDate }} ~ {{item.lifespanTextObject.endTime | formatDate }}
								</view>
								<!-- <view class="f24" v-if="item.lifespanType == 2">
									有效期：{{item.lifespanTextObject.lifespan}}天</view> -->
							</view>
						</view>
						<view class="flex" v-if="item.conpType == 3">
							<view class="mr30">
								<view :class="item.useStauts > 0?'c999':'cyellow'">
									<text class="f32 bold">无门槛</text>
								</view>
								<view class="f24" :class="item.useStauts > 0?'c999':'cyellow'">
									满0可用</view>
							</view>
							<u-line length="100rpx" color="#eee" direction="col"></u-line>
							<view class="flex1 ml30" :class="item.useStauts  > 0?'c999':'c343'">
								<view class="bold f28 mb10">{{item.name}}</view>
								<view class="f24">
									有效期：{{item.lifespanTextObject.startTime | formatDate }} ~ {{item.lifespanTextObject.endTime | formatDate }}
								</view>
								<!-- <view class="f24" v-if="item.lifespanType == 2">
									有效期：{{item.lifespanTextObject.lifespan}}天</view> -->
							</view>
						</view>

						<u-gap height="30"></u-gap>
						<view class="f24" :class="item.useStauts  > 0?'c999':'c343'">
							{{item.range == 1?'全家政业务':'指定家政业务'}}
						</view>
					</view>
					<image src="https://hxs.dsjhs.com:553/prod-api/profile/coupon-dt.png" mode="" class="yhq_bg"
						:class="{'img-gray':item.useStauts > 0}"></image>

					<view :class="['coupon-btn', { 'invalid': [2,3,5,6].includes(item.conpStatus)  }]"
						@tap="handleReceiveCoupon(item)">{{ mapCouponStatus(item.conpStatus) }}</view>
				</view>
			</view>

		</view>

		<!-- 活动细则 -->
		<view class="activity-rule">

			<view class="rule-wrap">
				<view class="rule-title">
					活动细则
				</view>
				<view class="rule-item">
					1、每个领券周期内，同一用户限领取一张(同一账号、手机号、移动设备、银行卡、支付账号、身份证以及其他信息相同均视为同一用户)。可在“首页-我-券包”内查看。
				</view>
				<view class="rule-item">
					2、用户抢领的消费券使用截止时间为从消费券投放当日开始计算的第17日23.59.59，逾期作废。如7月18日10:00投放的消费券，使用截止时间为8月3日23.59.59。其他时段投放的消费券使用截止时间依此类推。
				</view>
				<view class="rule-item">
					3、扣除商家等各类优惠后，单个产品达到用户所领取的消费券规定的最低面额，方能使用该消费券，不支持多个产品凑单使用一张消费券‌。
				</view>
				<view class="rule-item">
					4、适用范围:仅限于在黄石指定区域范围内使用，以下单详情页为准，如输入地址后无法下单则消费券无法使用。
				</view>
				<view class="rule-item">
					5、当用户在交易时使用消费券抵扣，如发生撤销、退货等反向操作，用户实际支付金额原路退回至支付账户，消费券退还至用户，所退还的消费券有效期不变，逾期作废。
				</view>
				<view class="rule-item">
					6、活动期间，如出现不可抗力或情势变更的情况，包括但不限于重大灾害事件、黑客攻击、系统故障、活动受政府机关指令需停止举办或调整本活动的，平台可依据相关法律法规的规定调整/暂停或提前终止活动。
				</view>
				<view class="rule-item">
					7、活动期间，用户不得使用任何外挂、插件以及其他破坏活动规则、违背活动公平原则的方式参加本次活动(如批量注册、恶意购买、虚假分享、倒买倒卖、虚假交易等)，用户和商户不得进行有组织的众包作弊行为，否则平台有权取消用户、商户参与活动资格，取消已经领取或者使用的抵用券或现金权益等，必要时平台将取消其后续参与平台任意活动的权利，并追究法律责任。
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getActCouponList,
	} from '@/common/api_user.js'

	import {
		receiveCoupon
	} from '@/common/api_housekeeping.js'

	export default {
		data() {
			return {
				listData: []
			}
		},
		onShow() {
			this.getCoupon()
		},
		filters: {
			formatDate(val) {
				return val.split(' ')[0]
			}
		},
		methods: {
			async getCoupon() {
				const res = await getActCouponList({
					isActivity: 1
				})
				if (res.code == 200) {
					this.listData = res.data
					uni.hideLoading()
				}
			},
			// 领取优惠券
			async handleReceiveCoupon(item) {
				console.log(item, 'item')
				if (item.conpStatus === 1) {
					const res = await receiveCoupon({
						id: item.id
					})
					console.log(res, 'resres')
					if (res.code == 200) {
						uni.showToast({
							title: '恭喜您，成功领取优惠券',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							this.getCoupon()
						}, 1000)
					} else {
						setTimeout(() => {
							this.getCoupon()
						}, 1000)
					}
				} else if (item.conpStatus === 4) {
					uni.navigateTo({
						url: '/subpage/housekeeping/index'
					})
				}

			},

			// 券状态
			mapCouponStatus(status) {
				switch (status) {
					case 1:
						return '立即领取'
					case 2:
						return '已结束'
					case 3:
						return '待开放'
					case 4:
						return '去使用'
					case 5:
						return '已使用'
					case 6:
						return '已失效'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F1F9F6;
		min-height: 100vh;
		padding-bottom: 60rpx;

		.banner-wrapper {
			position: relative;
			width: 100%;
			height: 560rpx;
			background: #F1F9F6 url('https://hxs.dsjhs.com:553/prod-api/profile/act-banner.png') no-repeat center;
			background-size: cover;

			.banner-text {
				position: absolute;
				top: 200rpx;
				left: 32rpx;
			}
		}
	}

	/* 顶部导航 */
	.nav-bar {
		padding: 20rpx 30rpx 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.nav-text {
		color: #34314F;
	}

	.nav-divider {
		margin: 0 20rpx;
		color: #34314F;
	}

	/* 标题区域 */
	.title-section {
		padding: 40rpx 30rpx 30rpx;
		text-align: center;
	}

	.main-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 0;
		text-align: left;
	}

	.sub-title {
		display: block;
		font-size: 24rpx;
		font-weight: 400;
		color: #34314F;
		line-height: 22px;
		text-align: left;
		font-style: normal;
	}
	
	.tag-box {
		width: 272rpx;
		height: 36rpx;
		margin-top: 26rpx;
		background: url('https://hxs.dsjhs.com:553/prod-api/profile/biaoqian-lv.png') no-repeat center;
		background-size: 100% 100%;
	}

	/* 三个功能图标 */
	.feature-icons {
		position: relative;
		top: -20rpx;
		display: flex;
		justify-content: space-around;
		padding: 0 30rpx;
		gap: 16rpx;
		background: #F1F9F6;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		background-color: #fff;
		border-radius: 40rpx;
		padding-bottom: 24rpx;
	}

	.icon-box {
		width: 224rpx;
		/* height: 120rpx; */
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
	}

	.icon {
		width: 224rpx;
		height: 176rpx;
	}

	.icon-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.icon-desc {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.activity-header {
		margin-bottom: 20rpx;
		justify-content: space-between;
	}

	/* 活动时间 */
	.activity-time {
		background-color: #fff;
		padding: 30rpx;
		margin: 20rpx 32rpx;
		border-radius: 40rpx;
	}

	.time-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
	}

	.time-content {
		display: block;
		height: 76rpx;
		margin-bottom: 12rpx;
		font-weight: 600;
		font-size: 14px;
		color: #34314F;
		text-align: center;
		line-height: 76rpx;
		background: #F7F7F7;
		border-radius: 10px;
	}

	.time-note {
		color: #999;
		display: block;
		font-size: 12px;
	}

	/* 活动内容 */
	.activity-content {
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.content-title {
		position: relative;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 40rpx;

		&::before {
			position: absolute;
			width: 156rpx;
			height: 46rpx;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/title-bg.png') no-repeat center;
			background-size: cover;
			content: '';
		}

	}

	.content-desc {
		font-size: 28rpx;
		display: block;
		margin-bottom: 30rpx;

		font-weight: 600;
		color: #34314F;
		line-height: 24px;
		text-align: center;
		font-style: normal;
	}

	/* 优惠券列表 */
	// .coupon-list {
	// 	display: flex;
	// 	flex-direction: column;
	// 	gap: 20rpx;
	// }

	.coupon-btn {
		position: absolute;
		top: 14rpx;
		right: 26rpx;
		height: 96px;
		padding: 0 22rpx;
		background: #21B9AD;
		border-radius: 22px;
		font-weight: 600;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 16px;
		text-align: center;
		writing-mode: vertical-rl;
		z-index: 9999;

		&.invalid {
			color: #34314F !important;
			background: #E8E8E8 !important;
		}
	}

	.activity-rule {
		// margin-top: 40rpx;
		padding: 0 32rpx;

		.rule-title {
			margin-bottom: 24rpx;
			font-weight: 600;
			font-size: 16px;
			color: #34314F;
			line-height: 22px;
			text-align: left;
			font-style: normal;
		}

		.rule-wrap {
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 20px;
			box-sizing: border-box;

			.rule-item {
				margin-bottom: 32rpx;
				font-weight: 400;
				font-size: 12px;
				color: rgba(52, 49, 79, 0.5);
				line-height: 17px;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.yhq_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;

	}

	.img-gray {
		filter: grayscale(100%);
		filter: gray;
		opacity: 0.7;
	}

	.yhq_staus_img {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;

		image {
			width: 140rpx;
		}
	}

	.coupon-item::before {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 2rpx;
		background: repeating-linear-gradient(to bottom,
				transparent,
				transparent 10rpx,
				rgba(255, 255, 255, 0.3) 10rpx,
				rgba(255, 255, 255, 0.3) 20rpx);
	}

	.coupon-left {
		flex: 1;
	}

	.price-section {
		display: flex;
		align-items: baseline;
		margin-bottom: 10rpx;
	}

	.currency {
		font-size: 28rpx;
		margin-right: 5rpx;
	}

	.price {
		font-size: 60rpx;
		font-weight: bold;
	}

	.usage-limit {
		font-size: 24rpx;
		opacity: 0.8;
		display: block;
		margin-bottom: 15rpx;
	}

	.coupon-type {
		font-size: 32rpx;
		font-weight: 500;
		display: block;
		margin-bottom: 10rpx;
	}

	.valid-time {
		font-size: 24rpx;
		opacity: 0.8;
		display: block;
		margin-bottom: 5rpx;
	}

	.service-note {
		font-size: 22rpx;
		opacity: 0.7;
	}

	.coupon-right {
		margin-left: 30rpx;
	}

	.receive-btn {
		background-color: rgba(255, 255, 255, 0.2);
		color: #fff;
		border: 2rpx solid rgba(255, 255, 255, 0.5);
		border-radius: 50rpx;
		padding: 15rpx 30rpx;
		font-size: 26rpx;
		line-height: 1;
	}

	.receive-btn.used {
		background-color: rgba(255, 255, 255, 0.9);
		color: #ff6b35;
		border-color: transparent;
	}

	.receive-btn.expired {
		background-color: rgba(0, 0, 0, 0.2);
		color: rgba(255, 255, 255, 0.6);
		border-color: rgba(255, 255, 255, 0.3);
	}

	.receive-btn::after {
		border: none;
	}
</style>